<template>
  <div class="app-container">
    <el-container class="container" style="width:100%;height:810px;">
      <el-main class="right" style="width:82%;margin-left:10px;overflow:hidden;background:#fff">
        <el-tabs v-model="controllerPiece">
          <el-tab-pane label="个人计件" name="first">
            <div style="width:100%">
              <div style="width:90%;height:40px;margin-left:30px;">
                <el-button
                  type="primary"
                  size="small"
                  class="el-icon-plus"
                  :disabled="disabled1"
                  @click="addData"
                >新增</el-button>
                <el-button
                  type="warning"
                  size="small"
                  class="el-icon-edit"
                  :disabled="disabled1"
                  @click="reviseData"
                >修改</el-button>
                <el-button
                  type="success"
                  size="small"
                  class="el-icon-mobile"
                  :disabled="disabled2"
                  @click="saveData"
                >保存</el-button>
                <el-button
                  type="danger"
                  size="small"
                  class="el-icon-back"
                  :disabled="disabled2"
                  @click="undoData"
                >撤销</el-button>
              </div>
              <el-divider />
              <div
                style="width:90%;height:280px;overflow:auto;float:left;border:1px solid #f5f5f5;padding:15px 0px"
              >
                <el-form
                  ref="ruleForm"
                  :model="ruleForm"
                  :rules="rules"
                  label-width="100px"
                  class="demo-ruleForm"
                  style="width:100%"
                >
                  <el-form-item label="员工姓名" prop="UserName">
                    <el-input v-model="ruleForm.UserName">
                      <i slot="suffix" class="el-icon-search" @click="getEmployeesData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="产品名称" prop="ProductName">
                    <el-input v-model="ruleForm.ProductName">
                      <i slot="suffix" class="el-icon-search" @click="getProductData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="产品工序" prop="ProcedureName">
                    <el-input v-model="ruleForm.ProcedureName">
                      <i slot="suffix" class="el-icon-search" @click="getProcessData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="订单名称" prop="OrderName">
                    <el-input v-model="ruleForm.OrderName">
                      <i slot="suffix" class="el-icon-search" @click="getOrderData" />
                    </el-input>
                  </el-form-item>
                  <el-form-item label="计件数量" prop="PieceQuantity">
                    <el-input
                      v-model="ruleForm.PieceQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedPiece"
                    />
                  </el-form-item>
                  <el-form-item label="部门" prop="OrgID">
                    <el-input v-model="ruleForm.OrgID" disabled />
                  </el-form-item>
                  <el-form-item label="产品编号" prop="ProductCode">
                    <el-input v-model="ruleForm.ProductCode" disabled />
                  </el-form-item>
                  <el-form-item label="工序编号" prop="ProcedureCode">
                    <el-input v-model="ruleForm.ProcedureCode" disabled />
                  </el-form-item>
                  <el-form-item label="订单编号" prop="OrderCode">
                    <el-input v-model="ruleForm.OrderCode" disabled />
                  </el-form-item>
                  <el-form-item label="计时" prop="HourlyQuantity">
                    <el-input
                      v-model="ruleForm.HourlyQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedTiming"
                    />
                  </el-form-item>
                  <el-form-item label="工序单价" prop="ProcedureUnitPrice">
                    <el-input v-model="ruleForm.ProcedureUnitPrice" disabled />
                  </el-form-item>
                  <el-form-item label="产品规格" prop="Spec">
                    <el-input v-model="ruleForm.Spec" :disabled="disabled" />
                  </el-form-item>
                  <el-form-item label="日期" prop="PieceworkDate">
                    <el-date-picker
                      v-model="ruleForm.PieceworkDate"
                      type="PieceworkDate"
                      placeholder="选择日期"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      :disabled="disabled"
                    />
                  </el-form-item>
                  <el-form-item label="人员编号" prop="UserCode">
                    <el-input v-model="ruleForm.UserCode" disabled />
                  </el-form-item>
                  <el-form-item label="损耗数量" prop="LossQuantity">
                    <el-input
                      v-model="ruleForm.LossQuantity"
                      onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                      :disabled="disabled"
                      @change="computedLose"
                    />
                  </el-form-item>
                  <el-form-item label="工时单价" prop="ManHourUnitPrice">
                    <el-input v-model="ruleForm.ManHourUnitPrice" disabled />
                  </el-form-item>
                  <el-form-item label="单据编号" prop="PieceworkCode">
                    <el-input v-model="ruleForm.PieceworkCode" disabled />
                  </el-form-item>
                  <el-form-item label="计件金额" prop="PieceAmount">
                    <el-input v-model="ruleForm.PieceAmount" disabled />
                  </el-form-item>
                  <el-form-item label="成本核算单位" prop="CostingUnit">
                    <el-input v-model="ruleForm.CostingUnit" disabled />
                  </el-form-item>
                  <el-form-item label="损耗单价" prop="LossUnitPrice">
                    <el-input v-model="ruleForm.LossUnitPrice" disabled />
                  </el-form-item>
                  <el-form-item label="计时金额" prop="HourlyAmount">
                    <el-input v-model="ruleForm.HourlyAmount" disabled />
                  </el-form-item>
                  <el-form-item label="损耗金额" prop="LossAmount">
                    <el-input v-model="ruleForm.LossAmount" disabled />
                  </el-form-item>
                  <el-form-item label="扣款不良率" prop="DeductionDefectRate">
                    <el-input v-model="ruleForm.DeductionDefectRate" disabled />
                  </el-form-item>
                  <el-form-item label="计件不良率" prop="PieceDefectRate">
                    <el-input v-model="ruleForm.PieceDefectRate" disabled />
                  </el-form-item>
                  <el-form-item label="小计" prop="PieceSubtotal">
                    <el-input v-model="ruleForm.PieceSubtotal" disabled />
                  </el-form-item>
                </el-form>
              </div>
              <div style="float:left;height:280px;width:10%;text-align:center;padding:50px 10px">
                <el-button
                  type="danger"
                  size="small"
                  class="el-icon-coordinate"
                  style="width:80%;margin-bottom:10px;"
                  :disabled="disabled3"
                  @click="aduitData"
                >提交</el-button>
                <el-button
                  type="info"
                  size="small"
                  class="el-icon-close"
                  style="width:80%;margin:10px;"
                  :disabled="disabled4"
                  @click="cancelAduit"
                >撤审</el-button>
                <el-input v-model="user" style="margin:10px;width:80%" />
                <el-select
                  v-model="operator"
                  :clearable="true"
                  style="margin:10px;width:80%"
                  @change="selectOperator"
                >
                  <el-option
                    v-for="item in auitType"
                    :key="item.index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
              <div style="width:100%;height:440px;border:1px solid #f5f5f5;clear:both">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="计件工资" name="first">
                    <generalTable
                      ref="wageTable"
                      :general-data="wageData"
                      :tableHead="wageHead"
                      @query="query"
                      @tableRow="tableRow"
                    ></generalTable>
                  </el-tab-pane>
                  <el-tab-pane v-if="show==2" label="计件稽核" name="thired" />
                </el-tabs>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!-- 输入框的各种查询按钮事件的弹框 -->
      <el-dialog
        title="快捷搜索框"
        :visible.sync="Dialog"
        :show-close="false"
        width="65%"
        custom-class="customWidth"
      >
        <generalDialogTable
          v-if="open == 1"
          :radio="radio"
          :tableHead="employeesHead"
          :general-data="employeesData"
          @selectRow="selectRow"
        ></generalDialogTable>
        <generalDialogTable
          v-if="open == 2"
          :radio="radio"
          :tableHead="productHead"
          :general-data="productData"
          @selectRow="selectRow"
        ></generalDialogTable>
        <generalDialogTable
          v-if="open == 3"
          :radio="radio"
          :tableHead="processHead"
          :general-data="processData"
          @selectRow="selectRow"
        ></generalDialogTable>
        <generalDialogTable
          v-if="open == 4"
          :tableHead="orderHead"
          :radio="radio"
          :general-data="orderData"
          @selectRow="selectRow"
        ></generalDialogTable>

        <div slot="footer" class="dialog-footer" style="margin-bottom:20px;">
          <el-button size="small" @click="cancel">取 消</el-button>
          <el-button size="small" type="primary" @click="sure">确定</el-button>
        </div>
      </el-dialog>

      <!-- 审核提示弹框 -->
      <el-dialog title="提示" :visible.sync="aduitDialog" width="30%">
        <span>确定要审核该条记录吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="aduitDialog = false">取 消</el-button>
          <el-button size="small" type="primary" @click="sureAduit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="cancelAduitDialog" width="30%">
        <span>确定要撤销该条记录的审核吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="sureUndo">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import generalDialogTable from './components/generalDialogTable'
import generalTable from './components/generalTable'
export default {
  components: { generalDialogTable, generalTable },
  data () {
    return {
      controllerPiece: 'first',
      remark: 1, // 区分是新增按钮还是修改按钮,默认是修改按钮
      addMoreDialog: false,
      disabled: true, // 控制页面一渲染就禁用input框
      disabled1: false, // 控制按钮的禁用
      disabled2: true, // 控制按钮的禁用
      disabled3: false, // 控制审核的禁用
      disabled4: true, // 控制撤审的禁用
      Dialog: false,
      aduitDialog: false,
      user: '', // 操作者
      operator: '',
      cancelAduitDialog: false,
      open: -1,
      radio: -1,
      currentRow: '',
      employeesData: [],
      employeesHead: [],
      productData: [],
      productHead: [],
      processData: [],
      processHead: [],
      orderData: [],
      orderHead: [],
      auitType: [
        { index: 1, name: '全部' },
        { index: 2, name: '已审核' },
        { index: 3, name: '未审核' },
        { index: 4, name: '本人审核' },
        { index: 5, name: '本人制单' },
        { index: 6, name: '全部禁用' }
      ],
      activeName: 'first',
      show: 0,
      wageData: [], // 工资表格
      wageHead: [], // 工资表格
      index: -1, // 当前行的索引
      ruleForm: {
        PieceworkCode: '',
        PieceworkDate: '',
        UserName: '',
        UserCode: '',
        OrgID: '',
        ProductCode: '',
        ProductName: '',
        Spec: '',
        ProcedureCode: '',
        ProcedureName: '',
        PieceQuantity: '',
        OrderCode: '',
        OrderName: '',
        HourlyQuantity: '',
        LossQuantity: '',
        ProcedureUnitPrice: '',
        ManHourUnitPrice: '',
        LossUnitPrice: '',
        CostingUnit: '',
        PieceAmount: '',
        HourlyAmount: '',
        LossAmount: '',
        DeductionDefectRate: '',
        PieceDefectRate: '',
        PieceSubtotal: ''
      },
      rules: {
        PieceworkCode: [{ required: true, message: '单据编号是必填项', trigger: 'blur' }],
        ProductCode: [{ required: true, message: '产品编号是必填项', trigger: 'change' }],
        ProcedureCode: [{ required: true, message: '工序编号是必填项', trigger: 'change' }]
      }
    }
  },
  watch: {},
  mounted () {
    this.employeesHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '员工编号', property: 'UserCode' },
      { label: '员工姓名', property: 'UserName' },
      { label: '部门', property: 'OrgID' }
    )
    this.productHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '产品编号', property: 'ProductCode' },
      { label: '产品名称', property: 'ProductName' },
      { label: '产品规格', property: 'Spec' }
    )
    this.processHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '工序编号', property: 'ProcedureCode' },
      { label: '产品工序', property: 'ProcedureName' },
      { label: '产品规格', property: 'Spec' },
      { label: '工序单价', property: 'ProcedureUnitPrice' },
      { label: '工时单价', property: 'ManHourUnitPrice' },
      { label: '损耗单价', property: 'LossUnitPrice' },
      { label: '扣款不良率', property: 'DeductionDefectRate' },
      { label: '成本核算单位', property: 'CostingUnit' }
    )
    this.orderHead.push(
      { label: '序号', property: 'index', width: '100' },
      { label: '订单编号', property: 'OrderCode' },
      { label: '订单名称', property: 'OrderName' }
    )
    this.wageHead.push(
      { label: '单据编号', property: 'PieceworkCode', width: '120' },
      { label: '人员编号', property: 'UserCode', width: '120' },
      { label: '员工姓名', property: 'OrgID', width: '120' },
      { label: '部门', property: 'PieceworkCode', width: '120' },
      { label: '日期', property: 'PieceworkDate', width: '120' },
      { label: '产品编号', property: 'ProductCode', width: '120' },
      { label: '产品名称', property: 'ProductName', width: '120' },
      { label: '产品规格', property: 'Spec', width: '120' },
      { label: '工序编号', property: 'ProcedureCode', width: '120' },
      { label: '产品工序', property: 'ProcedureName', width: '120' },
      { label: '计件数量', property: 'PieceQuantity', width: '120' },
      { label: '订单编号', property: 'OrderCode', width: '120' },
      { label: '订单名称', property: 'OrderName', width: '120' },
      { label: '计时', property: 'HourlyQuantity', width: '120' },
      { label: '损耗数量', property: 'LossQuantity', width: '120' },
      { label: '工序单价', property: 'ProcedureUnitPrice', width: '120' },
      { label: '工时单价', property: 'ManHourUnitPrice', width: '120' },
      { label: '损耗单价', property: 'LossUnitPrice', width: '120' },
      { label: '成本核算单位', property: 'CostingUnit', width: '120' },
      { label: '计件金额', property: 'PieceAmount', width: '120' },
      { label: '计时金额', property: 'HourlyAmount', width: '120' },
      { label: '损耗金额', property: 'LossAmount', width: '120' },
      { label: '扣款不良率', property: 'DeductionDefectRate', width: '120' },
      { label: '计件不良率', property: 'PieceDefectRate', width: '120' },
      { label: '小计', property: 'PieceSubtotal', width: '120' }
    )
  },
  created () {
    for (var i = 0; i < 2; i++) {
      this.employeesData.push({
        index: i,
        UserCode: i,
        UserName: '张三' + i,
        OrgID: '开发部门' + i
      })

      this.productData.push({
        index: i,
        ProductCode: i,
        ProductName: '张三' + i,
        Spec: '开发部门' + i
      })
      this.orderData.push({
        index: i,
        OrderCode: i,
        OrderName: '订单' + i
      })
    }
    // eslint-disable-next-line no-redeclare
    for (var i = 0; i < 30; i++) {
      this.wageData.push({
        index: i,
        PieceworkCode: 1,
        PieceworkDate: '2020-7-08',
        UserName: '张珊',
        UserCode: i,
        OrgID: '开发',
        ProductCode: i,
        ProductName: '产品' + i,
        Spec: '200*400',
        ProcedureCode: i,
        ProcedureName: '工序' + i,
        PieceQuantity: i,
        OrderCode: i,
        OrderName: '订单' + i,
        HourlyQuantity: i,
        LossQuantity: i,
        ProcedureUnitPrice: i,
        ManHourUnitPrice: i,
        LossUnitPrice: i,
        CostingUnit: i,
        PieceAmount: i,
        HourlyAmount: i,
        LossAmount: i,
        DeductionDefectRate: i,
        PieceDefectRate: i,
        PieceSubtotal: i
      })
    }
  },
  methods: {
    // 查询表格内数据
    query (value) {},
    // 新增按钮
    addData () {
      this.remark = 0
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      this.$refs['ruleForm'].resetFields()
      this.ruleForm.PieceworkCode = parseInt(this.wageData[this.wageData.length - 1].index) + 1
      this.ruleForm.PieceworkDate =
        new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    },
    // 单击选中人员
    selectPeopleRow (row) {
      this.$refs.employeesTable2.toggleRowSelection(row)
    },
    // 修改按钮
    reviseData () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
    },
    // 输入计时算出计时金额
    computedTiming (val) {
      this.ruleForm.HourlyAmount = val * this.ruleForm.ManHourUnitPrice
      this.ruleForm.PieceSubtotal = this.ruleForm.HourlyAmount + this.ruleForm.PieceAmount - this.ruleForm.LossAmount
    },
    // 输入计件数量算出计件金额
    computedPiece (val) {
      this.ruleForm.PieceAmount = val * this.ruleForm.ProcedureUnitPrice
      this.ruleForm.PieceSubtotal = this.ruleForm.HourlyAmount + this.ruleForm.PieceAmount - this.ruleForm.LossAmount
    },
    // 输入损耗数量计算损耗金额和计件不良率
    computedLose (val) {
      this.ruleForm.LossAmount = val * this.ruleForm.LossUnitPrice
      this.ruleForm.PieceDefectRate = (val / this.ruleForm.PieceQuantity).toFixed(2)
      this.ruleForm.PieceSubtotal = this.ruleForm.HourlyAmount + this.ruleForm.PieceAmount - this.ruleForm.LossAmount
    },
    // 保存按钮
    saveData: function () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          // 新增
          if (this.remark === 0) {
            const data = {}
            for (var name in this.ruleForm) {
              data[name] = this.ruleForm[name]
            }
            this.wageData.splice(0, 0, data)
            // 调用子组件的方法
            this.$refs.wageTable.childMethod()
          } else {
            // 修改
            for (var name2 in this.ruleForm) {
              this.wageData[this.index][name2] = this.ruleForm[name2]
            }
          }
          this.disabled = true
          this.disabled1 = false
          this.disabled2 = true
          this.remark = 1
        }
      })
    },
    // 撤销按钮
    undoData () {
      this.disabled = true
      this.disabled1 = false
      this.disabled2 = true
      this.$refs['ruleForm'].resetFields()
      for (var name in this.ruleForm) {
        this.ruleForm[name] = this.wageData[this.index][name]
      }
      this.remark = 1
    },
    // 点击查询人员
    getEmployeesData () {
      this.open = 1
      this.Dialog = true
    },
    // 选中数据
    selectRow (row, index) {
      this.currentRow = row
      this.radio = index
    },
    // 查询产品名称
    getProductData () {
      this.open = 2
      this.Dialog = true
    },
    // 查询工序名称
    getProcessData () {
      this.open = 3
      this.Dialog = true
    },
    // 查询订单
    getOrderData () {
      this.open = 4
      this.Dialog = true
    },
    // 弹框确定按钮
    sure: function () {
      this.disabled = false
      this.disabled1 = true
      this.disabled2 = false
      if (this.open === 2) {
        const ProductCode = this.currentRow.ProductCode
        console.log(ProductCode)
        // 将产品编码传给后台带回该产品的所有工序赋值给processData
        const data = [
          {
            index: 0,
            ProcedureCode: '33',
            ProcedureName: '包装',
            Spec: '200*400',
            ProcedureUnitPrice: 30,
            ManHourUnitPrice: 25,
            LossUnitPrice: 1,
            DeductionDefectRate: 5,
            CostingUnit: '元'
          }
        ]
        this.processData = data
      }
      for (var name in this.currentRow) {
        this.ruleForm[name] = this.currentRow[name]
      }
      this.Dialog = false
      this.radio = -1
    },
    cancel () {
      this.currentRow = ''
      this.Dialog = false
      this.radio = -1
    },
    // 单击行选中
    tableRow (row) {
      this.index = row.indexes
      for (var name in this.ruleForm) {
        this.ruleForm[name] = row[name]
      }
    },
    // 审核按钮
    aduitData () {
      this.aduitDialog = true
    },
    // 确定审核
    sureAduit () {
      this.aduitDialog = false
    },
    // 选择操作者
    selectOperator (val) {
      if (val === '已审核' || val === '本人制单') {
        this.user = ''
        this.disabled3 = false
        this.disabled4 = true
      } else {
        this.user = '超级管理员'
        this.disabled3 = true
        this.disabled4 = false
      }
    },
    // 撤审按钮
    cancelAduit () {
      this.cancelAduitDialog = true
    },
    // 确定撤销审核
    sureUndo () {
      this.cancelAduitDialog = false
    }
  }
}
</script>
<style scoped>
 .container /deep/ .el-table th{
  background:#b5bdc5;
  color:#fff;
 }
.container /deep/ aside {
  padding: 0 !important;
  line-height: 0 !important;
}
.container /deep/ .el-main {
  padding: 0 !important;
  line-height: 0 !important;
  border-left: 2px solid #f5f5f5;
}
.right /deep/ .el-divider--horizontal {
  margin: 0;
}
.right /deep/ .el-form-item {
  margin-bottom: 10px;
  float: left;
}
.right /deep/ .el-table__body tr.current-row > td {
  background: #99caf9;
  color: #fff;
}
.container /deep/ .customWidth {
  margin-top: 5vh !important;
}
.right /deep/ .el-input--suffix .el-input__inner,
.right /deep/ .el-date-editor.el-input,
.right /deep/ .el-date-editor.el-input__inner,
.right /deep/ .el-input.is-disabled .el-input__inner,
.right /deep/ .el-input__inner {
  width: 176px;
}
.container /deep/ .el-input__suffix-inner {
  cursor: pointer;
  color: red;
}
.container /deep/ .el-dialog {
  margin-top: 5vh !important;
}
.right /deep/ .el-table .cell {
  text-align: center;
}
.right .el-select {
  width: 140px;
}
.right /deep/ .el-select .el-input--suffix .el-input__inner {
  width: 100%;
}
.right /deep/ .el-tabs__nav {
  margin-left: 30px;
}

.right /deep/ .el-input--medium {
  width: 150px;
}
.right /deep/ .el-tabs__item {
  color: #004ef9 !important;
  cursor: pointer;
  font-size: 16px;
  width: 160px;
  height: 35px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 5px;
  border-top: 2px solid #004ef9;
}
.left /deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #ccc !important;
  color: #fff;
}
</style>
